export const vUnderline = {
  name: 'underline',
  mounted(el: HTMLElement) {
    el.style.position = 'relative'

    const underline = document.createElement('span')
    underline.style.position = 'absolute'
    underline.style.bottom = '-4px'
    underline.style.left = '0'
    underline.style.width = '100%'
    underline.style.height = '2px'
    underline.style.backgroundColor = 'var(--el-color-primary)'
    underline.style.transform = 'scaleX(0)'
    underline.style.transformOrigin = 'bottom right'
    underline.style.transition = 'transform 0.25s ease-out'

    el.appendChild(underline)

    el.addEventListener('mouseenter', () => {
      underline.style.transform = 'scaleX(1)'
      underline.style.transformOrigin = 'bottom left'
    })

    el.addEventListener('mouseleave', () => {
      underline.style.transform = 'scaleX(0)'
      underline.style.transformOrigin = 'bottom right'
    })
  },
}
